<style lang="scss" scoped>
	@import '@/assets/css/variable';

	.detail {
		width: 100%;
		background-color: $bgw;
		min-height: 100%;
		font-size: 1.2rem;
		overflow: hidden;
		flex:1;
		box-sizing: border-box;
		.headerImg{
			width: 100%;
			box-sizing: border-box;
		}
		.info{
			display: flex;
			flex-direction: column;
			padding: 0 1.6rem 1rem 1.6rem;
			.line1{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 1rem 0;
				.title{
					font-size: 1.7rem;
					color: $color1;
				}
				.badge {
					padding: 0.4rem 1rem;
					font-size: 1.2rem;
					background-color: rgba(#FF7E16, 0.2);
					color: #FF7E16;
					// border: 0.1rem solid #FF6D00;
					border-radius: 0.3rem;
					box-sizing: border-box;
					overflow: hidden;
				}
			}
			.line2{
				display: flex;
				align-items: center;
				justify-content: flex-start;
				color: $color2;
				.text{
					font-size: 1.3rem;
					margin-left: 0.6rem;
				}
				.text2{
					font-size: 1.3rem;
					margin-left: 0.6rem;
					color: $adornColor;
				}
			}
		}
	}
	.content{
		padding: 1.4rem 1.6rem;
		
		.title2{
			font-size: 1.6rem;
			color: $color2;
			font-weight: bold;
		}
		.line{
			margin-top: 1.2rem;
			font-size: 1.3rem;
			.label{
				color: #999;
			}
			.value{
				color: #777;
				margin-left: 1.2rem;
				line-height: 1.6rem;
			}
		}
		.line3{
			margin-top: 1.2rem;
			font-size: 1.3rem;
			border-bottom: 1px solid #f4f4f4;
			padding-bottom: 1rem;
			.label{
				color: #999;
			}
			.title{
				font-size: 1.6rem;
				font-weight: bold;
				color: $color2;
			}
			.value{
				color: #777;
				margin-top: 1.2rem;
				line-height: 1.6rem;
			}
		}
		.line4{
			margin-top: 1.2rem;
			font-size: 1.3rem;
			padding-bottom: 1rem;
			.item{
				padding: 2.8rem 1.2rem 1.2rem 1.2rem;
				background-color: white;
				box-shadow:0 0 1px 1px #f4f4f4;
				border-radius: 0.8rem;
				margin-top: 3rem;
				position: relative;
				.image{
					position: absolute;
					left: 1.2rem;
					top: -1.7rem;
				}
				.name{
					font-size: 1.5rem;
					color: $color1;
				}
				.desc{
					margin-top: 0.8rem;
					color: $color3;
					font-size: 1.1rem;
					line-height: 1.6rem;
				}
			}
		}
	}
	.fix-bottom{
	  position: fixed;
	  bottom: 0rem;
	  left: 0;
	  right: 0;
	  z-index: 1;
	  box-sizing: border-box;
	  background: white;
	  text-align: center;
	  border-top: 1px solid #f4f4f4;
	  padding: 0.5rem 1.6rem;
	  display: flex;
	  align-items: center;
	  justify-content: space-around;
	  .box{
		  flex: 0 0 3.6rem;
		  .icon{
			  
		  }
		  .text{
			  font-size: 1.3rem;
			  color: $color3;
		  }
	  }
	  .submitBtn{
		  flex: 1;
		  background-color:$mainColor;
		  color:white;
		  margin: 0.2rem auto;
		  font-size: 1.4rem;
		  
	  }
	}
	.jie{
		padding: 1rem 1.6rem;
		display: flex;
		
		.jieLeft{
			flex: 0 0 2rem;
		}
		.jieRight{
			flex: 1;
			.title{
				font-size: 1.5rem;
				color: $color1;
			}
			.time{
				margin-top: 0.6rem;
				font-size: 1.2rem;
				color:$color2;
			}
		}
	}
</style>
<template>
	<div class="detail">
		<img class="headerImg" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-5ec59f1e-d7e4-40a5-91d6-605747ef2fcc/90c7507e-49fc-4579-bb6e-f99b830c4d34.png" alt="">
		<div class="info">
			<div class="line1">
				<span class="title">中国国学文化</span>
				<span class="badge">报名中</span>
			</div>
			<div class="line2">
				<span><van-icon name="clock-o" size="1.8rem"/></span>
				<span class="text">2021-04-18 12:00 报名截止</span>
			</div>
			<div class="line2 margT-l">
				<span><van-icon name="location-o" size="1.9rem"/></span>
				<span class="text">平阳电大1号教学楼2004教室</span>
			</div>
			<div class="line2 margT-l">
				<span><van-icon name="friends-o" size="1.9rem"/></span>
				<span class="text">20人已报名</span>
				<span class="text">|</span>
				<span class="text2">限报50人</span>
			</div>
		</div>
		<div class="splitLine"></div>
		<div>
			<van-tabs v-model="tabActive" line-width="100" title-active-color="#335FFC" color="#335FFC">
			  <van-tab title="课程简介">
				  <div class="content">
					  <div class="title2">
							课程信息
					  </div>
					  <div class="line">
						  <span class="label">时间</span>
						  <span class="value">2021-04-20 9:00 至 2021-05-20 10:00</span>
					  </div>
					  <div class="line">
						  <span class="label">课时</span>
						  <span class="value">8节课时</span>
					  </div>
					  <div class="line3">
						  <div class="label">备注</div>
						  <div class="value">
							  我们将在2021年4月20日早上九点(平阳电大一号教学楼 2004教室)开始《中国国学文化》课程，有需要的学员请点击下方按钮进行报名，过了报名时间则无法报名,还望知悉！
						  </div>
					  </div>
					  <div class="line3">
						  <div class="title">课程介绍</div>
						  <div class="value">
							  我们将在2021年4月20日早上九点(平阳电大一号教学楼 2004教室)开始《中国国学文化》课程，有需要的学员请点击下方按钮进行报名，过了报名时间则无法报名,还望知悉！
						  </div>
					  </div>
					  <div class="line4">
						  <div class="title">课程讲师</div>
						  <div class="item">
							  <van-image
								class="image"
								round
							    width="3.4rem"
							    height="3.4rem"
							    fit="cover"
							    src="https://img01.yzcdn.cn/vant/cat.jpeg"
							  />
							  <div class="name">叶朗</div>
							  <div class="desc">北京大学 北京资深教授，教育部艺术教育委员会主任委员， 北京大学艺术学院名誉院长，博士生导师。</div>
						  </div>
					  </div>
				  </div>
			  </van-tab>
			  <van-tab title="课程目录">
				  <div class="jie">
					  <div class="jieLeft">01</div>
					  <div class="jieRight">
						  <div class="title">莫高窟——古丝绸路上的咽喉之地</div>
						  <div class="time">上课时间：5月1日(周二) 9:00-9:40</div>
					  </div>
				  </div>
				  <div class="jie">
					  <div class="jieLeft">02</div>
					  <div class="jieRight">
						  <div class="title">莫高窟——古丝绸路上的咽喉之地</div>
						  <div class="time">上课时间：5月1日(周二) 9:00-9:40</div>
					  </div>
				  </div>
			  </van-tab>
			</van-tabs>
		</div>
		<div class="tabbar-height-white"></div>
		<div class="fix-bottom">
			<van-button round class="submitBtn">扫码签到</van-button>
		</div>
	</div>
</template>

<script>
	// @ is an alias to /src
	import SearchBox from '@/components/SearchBox.vue'
	import {
		myMixins
	} from "@/assets/js/mixins.js"
	export default {
		name: "course",
		mixins: [myMixins],
		components: {
			SearchBox
		},
		data() {
			return {
				tabActive:0
			}
		},
		created() {
			const _this = this;
			// this.getCode()
		},
		mounted() {
			
		},
		methods: {
			onClickTabs(index) {
				console.log("onClickTabs", index)
				this.active = index
				if (index == 0) {
					//全部
					this.scrollToPosition('list0')
				} else if (index == 1) {
					//线下课程
					this.scrollToPosition('list1')
				} else if (index == 2) {
					//在线学习
					this.scrollToPosition('list2')
				}
			},
			getActivityPage() {
				const _this = this;
				let params = {
					status: 2,
					pageNo: _this.pageNo,
					pageSize: _this.pageSize
				}
				_this.$request.getActivityPage(params).then(res => {
					let data = res.data.data
					_this.list.push(...data)
					console.log(_this.list.length)
					if (_this.pageNo >= (Math.ceil(res.data.totalCount / _this.pageSize))) {
						_this.finished = true;
					} else {
						_this.pageNo++
					}
					// this.$store.commit('setCaseList', this.caseList);
				}).finally(() => {
					console.log('finally')
				})
			},
		}
	};
</script>
